<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar">
        <h3>公司新闻</h3>
        <ul class="menu">
          <router-link :to="{ path: './concept' }">
            <li class="active">延保概念</li>
          </router-link>
          <router-link :to="{ path: './scope' }">
            <li>延保范围</li>
          </router-link>
          <router-link :to="{ path: './brands' }">
            <li>服务品牌</li>
          </router-link>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img
              src="@/assets/images/202004011028126d577b.png"
              alt="咨询热线"
              class="contact-icon"
            />
          </div>
          <div class="contact-item">
            <img
              src="@/assets/images/20200401105022f62918.png"
              alt="邮箱"
              class="contact-icon"
            />
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="breadcrumb">
          <h4>延保信息</h4>
          <div style="display: flex">
            <router-link :to="{ path: '/' }">
              <li class="active">首页</li> </router-link
            >>延保信息>延保概念
          </div>
        </div>
        <!-- 新增新闻列表部分 -->
        <div class="news-list">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;"汽车延保"是汽车延长保修的简称，即汽车延长保修服务，购买延保服务的车辆在原厂保修期满后，由延保公司按照延保合同约定向该车辆提供一定时段或公里数的保修服务，在服务期内车辆发生延保合同范围内的机械及电气故障所产生的维修费用由延保公司承担。
          </p>

          <div class="clearfix">
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;"汽车延保"并不是汽车保险。两者的根本区别在于，"汽车保险"是<br />
              针对因车辆发生故障而引起的损失提供担保；而"汽车延保"是针对车<br />
              辆在正常使用当中自然引起的故障提供担保的。简单说，如果在行驶<br />
              过程中发生车祸而引起的维修费用就归保险公司承担；但是凡正常使<br />
              用车辆，在没有发生交通事故的情况下出现配件故障，就属于延保公<br />
              司的承担范围了。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;"汽车延保"对汽车行业来讲，是整个产业链的延伸。对消费者来讲，<br />
              购买汽车延保可以帮助消费者节省维修服务费用，同时又对二手车的出<br />
              售起到了保值的作用。对于汽车销售商来讲，汽车延保可以帮助他们维<br />
              护老客户，提高返厂率，同时又可以有效迎回流失客户。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const newsList = ref([
  {
    title: "安心汽车延保服务",
    description: "为您的爱车提供全方位的保障...",
    image: "@/assets/images/news1.jpg",
  },
  {
    title: "延保期内客户车辆出现故障怎么办？",
    description: "当您的车辆出现问题时，我们提供快速响应服务...",
    image: "@/assets/images/news2.jpg",
  },
  {
    title: "汽车延保该不该买？",
    description: "详细解析汽车延保的优势与必要性...",
    image: "@/assets/images/news3.jpg",
  },
]);
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: #c66b00;
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;

      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;

        h4 {
          color: #333;
          margin: 0;
        }
      }

      .news-list {
        text-align: left;
        font-size: 14px;

        .clearfix {
          padding: 20px;
          background: url("https://cdn-cloudflare.meidianbang.cn/comdata/70956/202003/202003242210499c2cf4.jpg")
            no-repeat 100%;
        }
      }

      img {
        margin: 0 auto;
        display: inline-block;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;

      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}
</style>
